<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column fixed prop="date" label="日期" width="150" v-if="showColumn.date">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" v-if="showColumn.name">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120" v-if="showColumn.provinces">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120" v-if="showColumn.city">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300" v-if="showColumn.adreess">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120" v-if="showColumn.zipCode">
      </el-table-column>
      <el-table-column fixed="right" width="100" align="center">
        <template v-slot:header>
          <!-- <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="showColumnOption"
          ></i> -->


          <el-icon :size="22" cursor: pointer @click="showColumnOption">
            <Setting />
          </el-icon>
        </template>
        <template v-slot="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 配置列面板 -->
    <transition name="fade">
      <div class="columnOption" v-show="isShowColumn">
        <div class="content">
          <div class="head">全部字段</div>
          <div class="body">
            <el-scrollbar height="1000px">
              <div class="scrollbar-demo-item">
                <el-checkbox v-model="checkList.date">日期</el-checkbox>
                <el-checkbox v-model="checkList.name">姓名</el-checkbox>
                <el-checkbox v-model="checkList.provinces">省份</el-checkbox>
                <el-checkbox v-model="checkList.city">市区</el-checkbox>
                <el-checkbox v-model="checkList.adreess">地址</el-checkbox>
                <el-checkbox v-model="checkList.zipCode">邮编</el-checkbox>
              </div>
            </el-scrollbar>

          </div>
          <div class="footer">
            <el-button size="small" type="primary" plain @click="saveColumn">保存列配置</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { Setting } from '@element-plus/icons'
export default {
  components: {
    Setting
  },
  data() {
    return {
      isShowColumn: false,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
        },
      ],
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      },
    }
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem('columnSet')) {
      this.checkList = JSON.parse(localStorage.getItem('columnSet'))
    } else {
      this.checkList = {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    showColumnOption() {
      this.isShowColumn = true
    },
    saveColumn() {
      localStorage.setItem('columnSet', JSON.stringify(this.checkList))
      this.isShowColumn = false
    },
  },
}
</script>

<style lang="scss" scoped>
.columnOption {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;

  .content {
    width: 100px;
    height: 100%;
    background-color: rgb(203, 223, 198);

    .head {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }

    .body {
      width: 100%;
      height: calc(100% - 88px);
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;

      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;

        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }

        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }

    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.scrollbar-demo-item {
  display: flex;
  // align-items: center;
  flex-direction: column;
  // justify-content: center;
  height: 1000px;
  width: 100%;
  // margin: -20px;
  margin-left: 20px;
  text-align: center;
  border-radius: 4px;
  // background: var(--el-color-primary-light-9);
  // color: var(--el-color-primary);
  color: var(--el-color-primary-light-9);
}
</style>
